<template>
  <!--  搜索框-->
  <div class="tenant-container">
    <div class="search" v-show="isShowSearch">
      <span>租户信息 </span>
      <el-input v-model="tenantName" placeholder="请输入租户/学校信息"/>
      <el-button :icon="Search" class="el-button__primary" type="primary" @click="initTenantList">查询</el-button>
      <el-button :icon="Refresh" class="el-button__default" @click="refreshData">重置</el-button>
    </div>
    <!--  操作按钮-->
    <div class="operation">
      <div class="float_left">
        <el-button :icon="Search" class="el-button__primary" type="primary" @click="handleInsertTenant">新增</el-button>
        <el-button :icon="Refresh" class="el-button__plain" @click="initTenantList">刷新缓存</el-button>
        <el-button :icon="Delete" class="el-button__plain__disabled" disabled>删除</el-button>
      </div>
      <div class="float_right">
        <el-tooltip :content="isShowSearch?'隐藏搜索':'显示搜索'" placement="top">
          <el-button :icon="Search" circle @click="showSearch()"/>
        </el-tooltip>
        <el-tooltip content="刷新" placement="top">
          <el-button :icon="Refresh" circle @click="initTenantList"/>
        </el-tooltip>
      </div>
    </div>
    <!--  租户信息card-->
      <div class="tenant-info__card">
        <el-row :gutter="30"
                v-loading="loading">
          <!--      循环tenantList创建el-card-->
          <el-col :lg="8" :md="12" :xs="24" v-for="item in tenantList">
            <el-card :key="item.id" class="tenant-info__card__item">
              <!--            基本信息-->
              <div class="tenant-info__card__item_base">
                <div class="tenant-info__card__item_base__item">
                  <span>租户名称：</span>
                  <span>{{ item.tenantName }}</span>
                </div>
                <div class="tenant-info__card__item_base__item">
                  <span><svg-icon style="font-size: 16px;" icon-class="num"/></span>&nbsp;&nbsp;&nbsp;
                  <span>{{ item.tenantId }}</span>
                </div>
              </div>
              <!--            其他信息-->
              <div class="bank-info__card__item__other">
                <div class="bank-info__card__item__other__item">
                  <span>租户地址： </span>
                  <span>{{ item.address }}</span>
                </div>
                <div class="bank-info__card__item__other__item">
                  <span>统一社会信用代码： </span>
                  <span>{{ item.licenseNumber }}</span>
                </div>
                <div class="bank-info__card__item__other__item">
                  <span>简介： </span>
                  <span>{{ item.intro }}</span>
                </div>
                <div class="bank-info__card__item__other__item">
                  <span>联系方式： </span>
                  <span>{{ item.contactUserName }} {{ item.contactPhone }}</span>
                </div>
                <div class="bank-info__card__item__other__item">
                  <span>租户状态： </span>
                  <span v-if="item.status===0" style="color: #535bf2">正常</span>
                  <span v-if="item.status===1" style="color: red">禁用</span>
                </div>
                <!--              操作-->
                <div class="tenant-info__card__item__operator">
                  <el-button link :icon="Edit" @click="editTenant(item.tenantId)"> 修改</el-button>
                  <el-button link :icon="item.status===0?TurnOff:Open" v-show="item.tenantId!=='000000'"
                             @click="updateStatus(item.tenantId,item.status)">{{ item.status === 0 ? '停用' : '启用' }}
                  </el-button>
                  <el-button link :icon="Delete" v-show="item.tenantId!=='000000'"
                             @click="removeTenant(item.tenantId)"> 删除
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    <!--  分页按钮-->
    <div class="pagination">
      <div class="pagination-block">
        <el-pagination
            v-model::current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[6,10,20,30,40,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <tenant-edit @refresh="refreshData"/>
    <tenant-insert @refresh="refreshData"/>
  </div>

</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Delete, Edit, List, Open, Refresh, Search, TurnOff} from "@element-plus/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {deleteTenant, getTenantPage, updateTenantStatus} from "@/api/tenant";
import type {TenantPageVO} from "@/api/tenant/types.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import TenantEdit from "@/components/tenant/tenantEdit.vue";
import {tenantStore} from "@/stores/tenant/tenantStore.ts";
import TenantInsert from "@/components/tenant/tenantInsert.vue";

const isShowSearch = ref(true)
const tenantName = ref('')
const tenantList = ref([] as TenantPageVO[])
const currentPage = ref(1)
const pageSize = ref(6)
const total = ref(0)
const loading = ref(false)
const store = tenantStore()
onMounted(() => {
  initTenantList()
})
const showSearch = () => {
  isShowSearch.value = !isShowSearch.value
}
const initTenantList = async () => {
  loading.value = true
  const res = await getTenantPage({page: currentPage.value, pageSize: pageSize.value, tenantName: tenantName.value})
  tenantList.value = res.data["records"]
  total.value = res.data["total"]
  currentPage.value = res.data['current']
  pageSize.value = res.data['size']
  loading.value = false
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  initTenantList()
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  initTenantList()
}
const refreshData = () => {
  tenantName.value = ''
  currentPage.value = 1
  pageSize.value = 6
  initTenantList()
}
/**
 * 修改租户状态
 * @param tenantId
 * @param status
 */
const updateStatus = async (tenantId: string, status: number) => {
  ElMessageBox.confirm('该操作可能导致租户不可用，确认修改?', '确认修改', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(async () => {
    const updateStatus = status === 0 ? 1 : 0
    const res = await updateTenantStatus(tenantId, updateStatus)
    if (!res.data) {
      ElMessage({
        type: 'error',
        message: '修改租户状态失败',
      })
    }
  }).catch(() => {
  })
      .finally(() => {
        refreshData()
      })
}

/**
 * 删除租户
 * @param tenantId 租户id
 */

const removeTenant = async (tenantId: string) => {
  ElMessageBox.confirm('删除后该租户不可用，确认删除?', '确认删除', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  }).then(async () => {
    const res = await deleteTenant(tenantId)
    if (!res.data) {
      ElMessage({
        type: 'error',
        message: '删除租户失败',
      })
    }
  }).catch(() => {
  }).finally(() => {
    refreshData()
  })
}


const editTenant = (tenantId: string) => {
  store.setTenantId(tenantId)
  store.setTenantEditOpen(true)

}

const handleInsertTenant=() => {
  store.setTenantInsertOpen(true)
}
</script>
<style scoped>
.tenant-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;

  border: 1px solid var(--el-menu-border-color)
}

.operation {
  width: 100%;
  height: 10%;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  display: flex;

  .float_left {
    align-items: center;
    display: flex;
  }

  .float_right {
    align-items: center;
    display: flex;
    margin-right: 20px;
  }
}

.tenant-info__card {
  min-height: 70%;
  display: flex;
  overflow: auto;
  margin: 0 60px;
  .el-row {
    width: 100%!important;
    height: 100%!important;
  }

  .tenant-info__card__item {
    border-radius: 10px;
    border: rgb(46, 92, 246) 1px solid;
    //background-color: rgb(243, 244, 246,0.2);
    box-shadow: 1px 1px 10px 1px rgb(46, 92, 246, 0.2);
    background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 模糊效果 */
  }
}

.pagination {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: right;

  .pagination-block {
    margin-right: 20px;
  }
}
.search {
  span {
    line-height: 32px;
  }

  display: flex;
  font-size: 12px;

  .el-input {
    width: 160px;
    height: 32px;
    font-size: 12px;
    margin: 0 8px;
  }

}

.tenant-info__card__item_base {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: bold;
  color: rgb(46, 92, 246);

  .tenant-info__card__item_base__item {
    display: flex;
    align-content: center;
  }
}

.bank-info__card__item__other {
  font-size: 12px;

  .bank-info__card__item__other__item {
    margin: 5px 0;
  }
}

.tenant-info__card__item__operator {
  font-size: 12px;
  display: flex;
  justify-content: right;

  .el-button {
    color: rgb(46, 92, 246);
    font-size: 12px;
  }
}
.el-col{
  margin-top: 20px;
  max-height: 220px;
}
</style>